<!-- #layout name=default -->
<div id="main" class="fixed">
    <div class="page-header">
        <!-- ko if: isNewCode -->
        <div class="form-inline pull-left margin-right-10" data-bind="visible: isNewCode">
            <div class="form-group" data-bind="error: name">
                <h1 class="title pull-left" data-bind="text: Kooboo.text.common.Code + ': ', visible: isNewCode"></h1>
                <input data-bind="value: name" type="text" placeholder="Name" class="form-control input-medium">
            </div>
        </div>
        <!-- /ko -->
        <!-- ko ifnot: isNewCode -->
        <h1 class="title pull-left">Code<span>:</span>
            <strong data-bind="text: name, attr:{ title: name }"></strong>
        </h1>
        <!-- /ko -->
        <!-- ko if: codeType() && codeType().toLowerCase() == 'api' -->
        <div class="form-inline pull-left">
            <div class="form-group">
                <h1 class="title pull-left">URL</h1>
                <input data-bind="value: url" type="text" placeholder="URL" class="form-control input-medium">
            </div>
        </div>
        <!-- /ko -->
        <div class="col-md-5 pull-right row">
            <div class="col-md-2 pull-right">
                <button data-bind="click: formatCode" type="button" class="btn btn-default">Format code</button>
            </div>
            <div class="form-inline pull-right">
                <!-- ko if: isNewCode -->
                <div class="form-group">
                    <select class="form-control" data-bind="options: availableCodeType, value: codeType, error: codeType, errorPlacement: 'left', optionsText: 'displayText', optionsValue: 'value', optionsCaption: Kooboo.text.site.code.chooseCodeType"></select>
                </div>
                <div class="form-group" data-bind="visible: codeType() && codeType().toLowerCase() == 'event'">
                    <select class="form-control" data-bind="options: availableEventType, value: eventType, error: eventType, optionsText: 'displayText', optionsValue: 'value', optionsCaption: Kooboo.text.site.code.chooseEventType"></select>
                </div>
                <!-- /ko -->
                <!-- ko ifnot: isNewCode -->
                <div class="form-group">
                    <label for="">Code type:</label>
                    <p class="form-control-static">
                        <label for="" class="label label-sm green" data-bind="text: codeType"></label>
                    </p>
                </div>
                <div class="form-group" data-bind="visible: codeType() && codeType().toLowerCase() == 'event'">
                    <label for="">Event type:</label>
                    <p class="form-control-static">
                        <label for="" class="label label-sm label-success" data-bind="text: eventType"></label>
                    </p>
                </div>
                <!-- /ko -->
            </div>
        </div>
    </div>
    <div class="block-fullpage with-buttons">
        <div class="block-visual-editor default">
            <div class="tabs-bottom">
                <div class="tab-content">
                    <div class="tab-pane" data-bind="css: { active: curType() == 'code' }">
                        <div class="kb-editor">
                            <textarea data-bind="codeMirror: {
                            mode: 'javascript',
                            value: codeContent,
                            theme: 'mdn-like'
                        }"></textarea>
                        </div>
                    </div>
                    <div class="tab-pane" data-bind="css: { active: curType() == 'config' }">
                        <div class="kb-editor">
                            <textarea data-bind="codeMirror: {
                                mode: 'javascript',
                                value: configContent
                            }"></textarea>
                        </div>
                    </div>
                </div>
                <ul class="nav nav-tabs">
                    <li data-bind="css: { active: curType() == 'code' }, click: changeType.bind(this, 'code')">
                        <a href="javascript:;">Code</a>
                    </li>
                    <li data-bind="css: { active: curType() == 'config' }, click: changeType.bind(this, 'config')">
                        <a href="javascript:;">Config</a>
                    </li>
                </ul>
            </div>
            <div class="kb-panel">
                <iframe src="/_Admin/Development/KScript/Documentation" frameborder="0" style="width: 410px;height: 100%;"></iframe>
            </div>
        </div>
    </div>
    <div class="page-buttons">
        <div class="btn-group dropup">
            <button data-bind="click: onSaveAndReturn" class="btn green" style="margin:0;">Save &amp; Return</button>
            <a class="btn green dropdown-toggle" data-toggle="dropdown" style="margin:0;min-width:auto;"><i class="fa fa-angle-up"></i></a>
            <ul class="dropdown-menu" role="menu">
                <li><a data-bind="click: onSave" href="javascript:;">Save</a></li>
            </ul>
        </div>
        <a data-bind="click: userCancel" class="btn gray">Cancel</a>
    </div>
</div>
<script>
    (function() {
        Kooboo.loadJS([
            "/_Admin/Scripts/kooboo/Guid.js",
            "/_Admin/Scripts/lib/codemirror/lib/codemirror.js",
            "/_Admin/Scripts/lib/codemirror/mode/javascript/javascript.js",
            "/_Admin/Scripts/lib/js-beautify/lib/beautify.js",
            "/_Admin/Scripts/kobindings.codemirror.js"
        ]);
        Kooboo.loadCSS([
            "/_Admin/Scripts/lib/codemirror/lib/codemirror.css",
            "/_Admin/Scripts/lib/codemirror/lib/mdn-like.css"
        ])
    })()
</script>
<script src="/_Admin/View/Development/EditCode.js"></script>